import { Search } from "@element-plus/icons-vue";
import { ElButton, ElInput } from "element-plus";
import { defineComponent, PropType, ref } from "vue";
import Style from './index.module.scss';

export default defineComponent({
    props: {
        placeholder: {
            type: String as PropType<string>,

        },
        modelValue: {
            type: String as PropType<string>,
            required: false,
        },
        // 新增：支持readonly属性（控制是否允许原生输入）
        readonly: {
            type: Boolean as PropType<boolean>,
            default: false
        }
    },
    emits: ["update:modelValue","click"],
    setup(props,{emit,attrs}) {
        const handleClick = () => {
            emit("click");
        };
        return () => <>
            <div style={{ display: 'inline-block' }} onClick={handleClick} >
                <ElInput
                    size="large"
                    class={[Style.inputStyle, "inputInner"]}
                    style={{ height: "60px" }}
                    modelValue={props.modelValue}
                    placeholder={props.placeholder}
                    readonly={props.readonly}
                    // onInput={(val) => emit("update:modelValue", val)}
                    {...attrs}
                >
                    {{
                        append: () => (
                            <ElButton
                                style={{ width: "91px" }}
                                type="primary"
                                icon={Search}
                                onClick={() => emit("click")}
                            ></ElButton>
                        )
                    }}
                </ElInput>
            </div>

        </>
    }
})
